<template>
 	<view>
 		<!-- 自定义导航栏 -->
 		<view class="navBarBox">
 			<!-- 状态栏占位 -->
 			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
 			<!-- 真正的导航栏内容 -->
 			<view class="navBar">
 				<view class="goback">
 					<view @click="goBack" class="goicon" style="background:url(../../static/goback.png);background-size:contain;background-repeat: no-repeat;">
 					</view>
 				</view>
 				<view class="title">申报课程</view>
 				<view class="right">
 		
 				</view>
 			</view>
 		</view>
 		<!-- 页面内容 -->
 		<view class="box">
			<ul  v-for="(item, index) in thisData" >
				<li>
					<view>
						<view>
							<image :src="item.courseLogo" alt=""></image>
							</view>
						<view class="banji">
							<text>{{item.courseName}}</text>
							<text>{{item.courseType===1?'兴趣爱好':'巩固提高'}}</text>
							<text>{{item.startDate.slice(0,10)}}</text>
						</view>
					</view>
					<view class="bigbox">
						<image :src="imgs[index]" alt="" class="imgx">
							<text>{{item.applyFlag=='1000'?'审核中':item.applyFlag=='1001'?'待邀请':item.applyFlag=='1002'?'已邀请':''}}</text>
						</image>
					</view>
				</li>
				
			<!-- 	<li>
					<view>
						<view><img src="" alt=""></view>
						<view class="banji">
							<text>春天培训班</text>
							<text>音乐</text>
							<text>2021-01-20</text>
						</view>
					</view>
					<view>
						<img src="" alt="">
						<text>审核中</text>
					</view>
				</li> -->
			</ul>
			
			<view class="button">
				<button @click="goCourseAdd" type="default" hover-class="button-hover">添加</button>
			</view>
			
		</view>
 	</view>
 </template>

<script>
	export default {
	 		data() {
	 			return {
					User:null,
					id:null,
	 				// 状态栏高度
	 				statusBarHeight: 0,
	 				// 导航栏高度
	 				navBarHeight: 82+11,
					
					//渲染数据
					thisData:[],
					//状态背景图
					imgs:[],
	 			};
	 		},
	 		props: {
	 			
	 		},
	 		//第一次加载时调用
	 		created() {
	 			//获取手机状态栏高度
	 			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
				this.User=uni.getStorageSync('schAdminConfirmData')
	 		},
			onLoad(option) {
					console.log(option.id,'id取到的')
					this.id=option.id
			},
			methods:{
				//课程渲染
				apply(){
					this.$myRequest({
					    url: '/admin/course/applyCourseList/'+this.id,
					    success: (res) => {
							// this.thisData=[]
							this.thisData=res.data.data
							 console.log(this.thisData,'图片')
							 for(let i=0;i<res.data.data.length;i++){
								 switch(res.data.data[i].applyFlag) {
								      case '1000':
								         this.imgs.push('../../static/img/register/shz.png')
								         break;
								      case '1001':
								         this.imgs.push('../../static/img/register/dyq.png')
								         break;
									 case '1002':
										this.imgs.push('../../static/img/register/yyq.png')
										break;
									} 
									
							 }
							 
					    }
					});
				},
				goBack() {
					// 此处是写返回页面的方法、
				
					uni.navigateBack({
						url:'../teachmanag/manageSchool'
					});
				},
				//去-课程申报页（添加页）
				goCourseAdd(){
					uni.navigateTo({
						url:'./courseAdd?id='+this.User.orgId
					})
				}
			},
			
			mounted(){
				this.apply()
			},
	 	}
	 </script>
	 
	 <style lang="less">
	.navBarBox {}
	
		.navBarBox .statusBar {}
	
		.navBarBox .navBar {
			padding: 3rpx 50rpx;
			padding-bottom: 8rpx;
			display: flex;
			justify-content: space-between;
	
			line-height: 93rpx;
			font-size: 40rpx;
		}
	
		.goback {
			flex: 1;
			height: 100%;
		}
		.goicon{
			width: 30rpx;
			height: 30rpx;
			background-color: #00BEA9;
			margin-top: 30rpx;
		}
		.title {
			flex: 1;
			height: 100%;
			
		}
		.right{
			flex: 1;
		}
		
		.box{
			padding: 30rpx;
			background: #f7f7f7;
			ul{
				li{
					height: 220rpx;
					border-radius: 16rpx;
					padding: 0 0 0 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #FFFFFF;
					margin-bottom: 30rpx;
					&>view:nth-child(1){
						display: flex;
						
						.banji{
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							margin-left: 20rpx;
							text:nth-child(1){
								font-size: 33rpx;
								font-weight: bold;
							}
							text:nth-child(2){
								font-size: 28rpx;
							}
							text:nth-child(3){
								font-size: 28rpx;
								color: #999999;
							}
						}
						&>view:nth-child(1){
							background: #55aa7f;
							width: 168rpx;
							height: 148rpx;
							border-radius: 15rpx;
							overflow: hidden;
							img{
								width: 168rpx;
								height: 148rpx;
								
							}
						}
					}
					&>view:nth-child(2){
						width: 130rpx;
						height: 70rpx;
						// background: #4CD964;
						// background: url(../../static/img/register/shz.png);
						// display: flex;
						// flex-direction: column;
						// justify-content: center;
						// align-items:flex-start; 
						margin-top: -100rpx;
						position: relative;
						.imgx{
							width: 130rpx;
							height: 70rpx;
							// display: flex;
							// flex-direction: column;
							// justify-content: center;
							// position: relative;
							background-size: 130rpx 70rpx;
							
						}
						 text{
						 	position: absolute;
							width: 100rpx;
						 	top: 50%;
						 	left: 50%;
							transform: translate(-40%,-60%);
							color: #fff;
							font-size: 28rpx;
						 }
					}
				}
			}
			
		}
		.button{
			display: flex;
			justify-content: center;
			margin: 65rpx 0;
			button{
				width: 230rpx;
				height: 70rpx;
				color: #fff;
				background-color: #2db3fe;
				box-shadow: 0 0 30rpx 3rpx rgba(180,226,251);
				font-size: 34rpx;
				line-height: 70rpx;
			}
			
		}
		.button-hover[type="default"] {
					color: #fff;
					background-color: #118ace;
		}
	 </style>
